<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>疯了</title>
		<link rel="stylesheet" href="./layui/css/layui.css" />
	</head>
	<style lang="less">
		.tx-introduce{

			height: 800px;
			width: 1200px;
			margin: 0px auto;
			/* border:1px solid; */
		}
		.introduce-left_child{
		/* 	width: 380px; */
			height: 300px;
			padding-left: 20px;
			/* background-color: antiquewhite; */
		}
		
		.introduce-left{
			height: 300px;
		}
		.introduce-left_child_top{
			height: 50%;
			background-color: pink;
		}
		.introduce-left_child_top_animal{
			height: 40%;
			background-color: skyblue;
		}
		.introduce-left_child_foot{
			margin-top: 5px;
			height: 50%;
			background-color: palegreen;
		}
		.introduce-left_child_foot_animal{
				margin-top: 5px;
			height: 60%;
			background-color: orangered;
		}
		.introduce-center{
			height: 300px;
			/* background-color: crimson; */
		}
		.introduce-right{
			height: 300px;
			/* background-color: aqua; */
		}
		/* 媒体查询 */
		/* 小于767px才执行下面代码 */
		@media(max-width:575px){
			/* xs的效果 */
			.tx-introduce{
				width: 100%;
			}
		}
		@media(min-width:576px) and (max-width:767px){
			/*576-767之间显示这个效果 */
			/* sm的效果 */
			.tx-introduce{
				width: 100%;
				
			}
		}
		@media(min-width:768px) and (max-width:991px){
			/*768-991之间显示这个效果 */
			/* md的效果 */
			.tx-introduce{
				width: 768px;
				margin: 0 auto;
			}
		}
		@media(min-width:992px) {
			/*最小为992显示这个效果 */
			/* lg的效果 */
			.tx-introduce{
				width: 992px;
				margin: 0 auto;
			}
		}
		.one_line{
			margin-bottom: 30px;
		}
		.introduce-left_child:hover{
			transform: translateY(-2px);
			transition: all 0.5s;
				box-shadow: 2px 1px	  #ccc ;
				.introduce-left_child_foot{
					transform: translateY(-5px);
						transition: all 0.5s;
				}
				.introduce-left_child_foot_animal{
					transform: translateY(-5px);
						transition: all 0.5s;
				}
		}
	</style>
	<body>
		<!-- 模拟腾讯布局 -->
		<div class="tx-introduce layui-row">
			<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 one_line">
				<div class="layui-col-xs12 layui-col-sm4 layui-col-md4 introduce-left">
					<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 introduce-left_child">
						<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 introduce-left_child_top">
						</div>
						<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 introduce-left_child_foot">
						</div>
					</div>
				</div>
				<div class="layui-col-xs12 layui-col-sm4 layui-col-md4 introduce-center">
						<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 introduce-left_child">
							<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 introduce-left_child_top">
							</div>
							<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 introduce-left_child_foot">
							</div>
						</div>
				</div>
				<div class="layui-col-xs12 layui-col-sm4 layui-col-md4 introduce-right">
						<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 introduce-left_child">
							<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 introduce-left_child_top">
							</div>
							<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 introduce-left_child_foot">
							</div>
						</div>
				</div>
			</div>
			<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 two_line">
				<div class="layui-col-xs12 layui-col-sm8 layui-col-md8 introduce-left">
					<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 introduce-left_child">
						<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 introduce-left_child_top">
						</div>
						<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 introduce-left_child_foot">
						</div>
					</div>
				</div>
				<div class="layui-col-xs12 layui-col-sm4 layui-col-md4 introduce-right">
						<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 introduce-left_child">
							<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 introduce-left_child_top_animal">
							</div>
							<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 introduce-left_child_foot_animal">
							</div>
						</div>
				</div>
			</div>
		</div>
	</body>
</html>